<template>
    <el-dialog
        title="配置可用商家"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="450px"
        :before-close="clearData"
    >
        <div class="wrap">
            <el-tree
                :data="data"
                show-checkbox
                node-key="key"
                ref="tree"
                highlight-current
                :props="defaultProps"
                :default-checked-keys="checkArr"
            >
            </el-tree>
        </div>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="save"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        value: Boolean,
        checkArr: Array,
        form: Object,
        id: Number
    },
    data () {
        return {
            loading: false,
            showValue: false,
            data: [],
            defaultProps: {
                children: 'leafNodeVOList',
                label: 'value',
                id: 'key'
            }
        }
    },
    watch: {
        value (val) {
            this.showValue = val
            if (val) {
                console.log(this.checkArr)
                this.companyList()
            }
        },
        showValue (val) {
            this.$emit('update:value', val)
        }
    },
    methods: {
        async companyList () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/management/companyList', {
                data: {
                    agentId: this.$store.state.loginParams.agentId,
                    managementTypes: [this.form.managementTypes]
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.data = response.data
            }
        },
        // 清空数据
        clearData () {
            this.data = []
            this.loading = false
            this.showValue = false
        },
        // 保存表单
        async save () {
            if (this.$refs.tree.getCheckedKeys().length === 0) {
                return this.$message({
                    showClose: true,
                    message: '请选勾选商家',
                    type: 'warning'
                })
            }
            this.$emit('getIds', this.$refs.tree.getCheckedKeys())
            this.clearData()
            this.$message({
                showClose: true,
                message: '配置成功',
                type: 'success'
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.wrap
    height: 400px
    overflow: auto

.tip
    color: red
    margin-bottom: 20px
</style>